<template>
	<view class="share">
		<image mode="widthFix" class="share-bg" src="@/static/images/common/share-bg.png" />
		<image mode="widthFix" class="share-btn" src="@/static/images/common/share-btn.png" @tap="shareToPlat()"/>
		<view class="share-rules" @click="showRules">活动规则</view>
		<view class="front">
			<view class="share-title" @tap="getShareInfo()">立即邀请</view>
			<view class="share-info">
				<image mode="widthFix" class="share-plot" src="@/static/images/common/share-plot.png" />
				<view class="share-profit">
					<view class="share-item">
						<text class="text">{{ registerNum }}<text class="small">人</text></text>
						已邀请
					</view>
					<view class="share-item line">
						<text class="text">{{ inviteNum }}<text class="small">人</text></text>
						有效用户
					</view>
					<view class="share-item line">
						<text class="text">{{ scoreNum }}</text>
						获得积分
					</view>
				</view>

				<template v-if="shareList.length > 0">
					<view class="friends-item" v-for="(item, index) in shareList" :key="index">
						<view class="left">
							<image mode="widthFix" class="avatar" :src="item.headUrl"></image>
							<text class="text">{{ item.nickName }}</text>
						</view>
						<text class="time">{{ item.createTime }}</text>
					</view>
				</template>
				<view class="share-empty" v-else>暂未邀请到好友</view>
			</view>
			<image mode="widthFix" class="share-course" src="@/static/images/common/share-course.png" />
		</view>

		<popup ref="shareRules" class="rules-opoup">
			<view class="main">
				<text class="iconfont icon-guanbi" @tap="$refs.shareRules.close();"></text>
				<text class="text">1、邀请好友下载并注册，且邀请的好友完成首单（0元购、百万补贴、新人专享、限时抢购不计入首单、付款金额大于5元），好友确认收货后即可获得5000积分</text>
				<text class="text">2、本活动与Apple Inc. 无关</text>
				<text class="text">本规则在法律允许范围内嗨返APP平台拥有最终解释权。</text>
			</view>
		</popup>
		
		<popup ref="sharePlat" class="share-opoup" type="bottom">
			<view class="main">
				<view class="plat-item" @tap="shareToPlat('WXSceneSession')">
					<image class="image wechat" src="@/static/images/goods/wechat.png" />
					<text class="text">微信好友</text>
				</view>
				<view class="plat-item" @tap="shareToPlat('weixinTimeline')">
					<image class="image moments" src="@/static/images/goods/moments.png" />
					<text class="text">朋友圈</text>
				</view>
			</view>
		</popup>
	</view>
</template>

<script>
	import moment from '@/utils/packges/moment'
	import Popup from '@/components/uni/Popup'
	export default {
		components: {
			Popup
		},
		data() {
			return {
				shareList: [],
				inviteNum: 0,
				registerNum: 0,
				scoreNum: 0,
				shareInfo: []
			};
		},

		onShow() {
			this.getScoreCount();
		},

		methods: {
			// 获取邀请统计
			getScoreCount() {
				this.$service.integral.score.count().then(res => {
					this.inviteNum = res.inviteNum;
					this.scoreNum = res.scoreNum;
					this.registerNum = res.registerNum || 0;
					this.shareList = res.list;
					this.shareList.forEach(item => {
						item.createTime = moment(item.createTime  * 1000).format('YYYY-MM-DD HH:mm:ss')
					})
				})
			},
			showRules() {
				this.$refs.shareRules.open();
			},
			getShareInfo() {
				this.$service.common.userHf.immediateInvitation().then(res => {
					this.shareInfo = res;
					this.$refs.sharePlat.open();
				})
				
			},
			shareToPlat(type) {
				console.log(this.shareInfo)
				if (type === 'WXSceneSession') {
					uni.share({
					    provider: "weixin",
					    scene: type,
					    type: 0,
					    href: this.shareInfo[0].url,
					    title: this.shareInfo[0].title,
					    summary: this.shareInfo[0].subtitle,
					    imageUrl: this.shareInfo[0].imgUrl,
					    success: function (res) {
							uni.showToast({
								title: '分享成功',
								icon: 'none'
							})
					    },
					    fail: function (err) {
					        uni.showToast({
					        	title: '分享失败',
					        	icon: 'none'
					        })
					    }
					});
				} else {
					uni.share({
					    provider: "weixin",
					    scene: type,
					    type: 0,
					    href: this.shareInfo[1].url,
					    title: this.shareInfo[1].title,
					    summary: this.shareInfo[1].subtitle,
					    imageUrl: this.shareInfo[1].imgUrl,
					    success: function (res) {
							uni.showToast({
								title: '分享成功',
								icon: 'none'
							})
					    },
					    fail: function (err) {
					        uni.showToast({
					        	title: '分享失败',
					        	icon: 'none'
					        })
					    }
					});
				}
			}
		}
	};
</script>
<style lang="scss" scoped>
	.share {
		min-height: 100vh;
		background: #fd2352;
		position: relative;

		.share-bg {
			width: 100%;
			position: absolute;
		}

		.share-btn {
			position: absolute;
			top: 290rpx;
			left: 50%;
			margin-left: -182rpx;
			width: 364rpx;
		}

		.share-rules {
			position: absolute;
			right: 0;
			top: 50rpx;
			background: #fff;
			padding: 6rpx 20rpx 6rpx 30rpx;
			color: #FF1745;
			font-size: 24rpx;
			border-radius: 50rpx 0 0 50rpx;
			z-index: 100;
		}

		.front {
			position: relative;
			padding: 320rpx 24rpx 0;

			.share-title {
				color: #A41402;
				font-size: 36rpx;
				width: 100%;
				text-align: center;
			}

			.share-info {
				width: 100%;
				margin-top: 100rpx;
				padding: 10rpx 20rpx 0 20rpx;
				min-height: 296rpx;
				border-radius: 16rpx;
				background: #fff;
				position: relative;

				.share-plot {
					width: 278rpx;
					position: absolute;
					left: 50%;
					top: -28rpx;
					margin-left: -139rpx;
				}

				.share-profit {
					margin-top: 60rpx;
					border-bottom: 2rpx solid #FFBBC0;
					padding-bottom: 30rpx;
					@include flexBox(space-between);

					.share-item {
						width: 50%;
						font-size: 28rpx;
						color: #616161;
						@include flexBox(center, center, column);

						.text {
							color: #E60011;
							font-size: 48rpx;

							.small {
								font-size: 28rpx;
							}
						}

						&.line {
							border-left: 2rpx solid #FFBBC0;
						}
					}
				}

				.friends-item {
					padding: 20rpx 0;
					@include flexBox(space-between, center);

					.left {
						@include flexBox(null, center);
						color: #616161;

						.avatar {
							width: 60rpx;
							height: 60rpx;
							margin-right: 20rpx;
						}
					}

					.time {
						color: #616161;
					}
				}

				.share-empty {
					width: 100%;
					text-align: center;
					font-size: 28rpx;
					color: #616161;
					line-height: 80rpx;
				}
			}

			.share-course {
				width: 100%;
				margin-top: 30rpx;
			}
		}
	}

	.rules-opoup {
		.main {
			width: 600rpx;
			background: #fff;
			padding: 60rpx 30rpx 30rpx;
			border-radius: 16rpx;
			position: relative;
			color: #616161;
			@include flexBox(null, null, column)
			.text {
				margin-bottom: 20rpx;
			}
			.iconfont {
				position: absolute;
				right: 20rpx;
				top: 6rpx;
			}
		}
	}
	.share-opoup {
		.main {
			background: #fff;
			width: 100%;
			height: 200rpx;
			@include flexBox(space-around, center);
			.plat-item {
				@include flexBox(center, center, column);
				.image {
					margin-bottom: 10rpx;
				}
				.wechat {
					width: 60rpx;
					height: 50rpx;
				}
				.moments {
					width: 50rpx;
					height: 50rpx;
				}
			}
		}
	}
</style>
